<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        form {
            position: absolute;
            right: 200px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #f1f1f1;
            padding: 50px;
            border-radius: 10px;
        }

        form>div>input[type=text] {
            width: 250px;
            height: 25px;
            border: 1px solid gray;
            border-radius: 3px;
            text-indent: 3px;
        }

        div span {
            display: block;
            margin-left: 80px;
            font-size: 12px;
            height: 18px;
            padding-left: 5px;
            white-space: nowrap;
        }

        div .randCode {
            display: inline-block;
            margin-left: 0;
        }

        form>div {
            width: 400px;
        }

        form>div:nth-last-child(1) {
            text-align: center;
        }

        form>div:nth-last-child(1)>button {
            margin-right: 30px;
        }


        .right {
            color: green;
        }

        .err {
            color: red;
        }
    </style>
</head>

<body>
    <!-- onsubmit="return false"  阻止表单默认提交 -->
    <form action="" onsubmit="return false" autocomplete="off">
        <div>
            <label for="user">用户名</label>
            <input id="user" type="text">
            <span class="user_span"></span>
        </div>
        <div>
            <label for="pwd">密码:</label>
            <input id="pwd" type="text">
            <span class="pwd_span"></span>
        </div>
        <div>
            <label for="repwd">确认密码:</label>
            <input id="repwd" type="text">
            <span class="repwd_span"></span>
        </div>
        <div>
            <label for="phone">手机号:</label>
            <input id="phone" type="text">
            <span class="phone_span"></span>
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input id="email" type="text">
            <span class="email_span"></span>
        </div>
        <div>
            <button id="regBtn">注册</button>
            <input type="reset">
        </div>
    </form>
</body>
<script>
    // 用户名  由数字,大小写字母,下划线,$ 组成  6-12位 且不能以数字开头
    // 密码    由数字,大小写字母,下划线 组成  6-12位 判断强中弱
    // 确认密码 
    // 手机号  1开头 11位
    // 邮箱    1272071492@qq.com


    var form = document.getElementsByTagName("form")[0];
    var pwdInp = document.getElementById("pwd");
    var randCode = document.getElementsByClassName("randCode")[0];
    var regBtn = document.getElementById("regBtn");


    var userInp = document.getElementById("user");
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var repwdInp = document.getElementById("repwd");
    var repwdSpan = document.getElementsByClassName("repwd_span")[0];

    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var userFlag = false;
    var pwdFlag = false;
    var repwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;

    // 一步到位  =>提示不够详细
    userInp.onblur = userInp.oninput = function () {
        userFlag = false;  // 每次表单失焦重新进行验证  userFlag重置为false
        var user = this.value.trim();

        var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;
        if (userReg.test(user)) {


            // 判断用户名是否存在
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistUser.php?user=" + user, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);

                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if (result.status) {
                        userSpan.className = "right";
                        userSpan.textContent = "√";
                        userFlag = true;
                    } else {
                        userSpan.className = "err";
                        userSpan.textContent = result.msg;
                    }

                }
            }
        } else {

            userSpan.className = "user_span err";
            userSpan.textContent = "由数字,大小写字母,下划线,$ 组成  6-12位 且不能以数字开头";
        }
    }

    pwdInp.onblur = pwdInp.oninput = function () {
        pwdFlag = false;
        var pwd = this.value.trim();
        var pwdReg = /^\w{6,12}$/;

        var numReg = /[0-9]/;
        var smallReg = /[a-z]/;
        var bigReg = /[A-Z]/;

        var numFlag = false;
        var smallFlag = false;
        var bigFlag = false;

        if (pwdReg.test(pwd)) {
            // pwdSpan.className = "pwd_span right";
            // pwdSpan.textContent = "√";

            if (numReg.test(pwd)) {
                numFlag = true;
            }

            if (smallReg.test(pwd)) {
                smallFlag = true;
            }

            if (bigReg.test(pwd)) {
                bigFlag = true;
            }

            var sum = numFlag + smallFlag + bigFlag;
            console.log(sum);

            switch (sum) {
                case 1:
                    pwdSpan.textContent = "密码强度:弱";
                    break;
                case 2:
                    pwdSpan.textContent = "密码强度:中";
                    break;
                case 3:
                    pwdSpan.textContent = "密码强度:强";
                    break;
            }
            pwdSpan.className = "right";
            pwdFlag = true;

        } else {
            pwdSpan.className = "err";
            pwdSpan.textContent = "由数字,大小写字母,下划线 组成  6-12位 判断强中弱";
        }
    }

    repwdInp.onblur = repwdInp.oninput = function () {
        repwdFlag = false;
        var pwd = pwdInp.value;
        var repwd = repwdInp.value;
        // "" && 123
        if (pwd && repwd) {
            if (pwd == repwd) {
                repwdSpan.className = "right";
                repwdSpan.textContent = "√";
                repwdFlag = true;
            } else {
                repwdSpan.className = "err";
                repwdSpan.textContent = "两次密码输入不一致";
            }
        }
    }


    phoneInp.onblur = phoneInp.oninput = function () {
        phoneFlag = false;
        var phone = this.value.trim();
        var phoneReg = /^1[2-9]\d{9}$/;
        if (phoneReg.test(phone)) {
            // phoneSpan.className = "phone_span right";
            // phoneSpan.textContent = "√";
            // phoneFlag = true;

            // 判断手机号是否存在
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistPhone.php?phone=" + phone, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);

                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if (result.status) {
                        phoneSpan.className = "right";
                        phoneSpan.textContent = "√";
                        phoneFlag = true;
                    } else {
                        phoneSpan.className = "err";
                        phoneSpan.textContent = result.msg;
                    }

                }
            }


        } else {
            phoneSpan.className = "err";
            phoneSpan.textContent = "请输入正确的手机号";
        }
    }

    // 123121321@qq.com
    emailInp.onblur = emailInp.oninput = function () {
        emailFlag = false;
        var email = this.value.trim();
        var emailReg = /^\w+@\w+\.com$/;
        if (emailReg.test(email)) {
            // emailSpan.className = "email_span right";
            // emailSpan.textContent = "√";
            // emailFlag = true;

            // 判断邮箱是否存在
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistEmail.php?email=" + email, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);

                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if (result.status) {
                        emailSpan.className = "email_span right";
                        emailSpan.textContent = "√";
                        emailFlag = true;
                    } else {
                        emailSpan.className = "email_span err";
                        emailSpan.textContent = result.msg;
                    }

                }
            }

        } else {
            emailSpan.className = "email_span err";
            emailSpan.textContent = "请输入正确的邮箱";
        }
    }


    // 点击注册  => 通过cookie模拟注册功能(前提  所有数据格式都是正确的)
    regBtn.onclick = function () {
        // alert(11111);
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        if (userFlag && pwdFlag && repwdFlag && phoneFlag && emailFlag) {
            // console.log("可以注册");

            // POST  
            var xhr = new XMLHttpRequest();

            xhr.open("post", "../php/register.php", true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    var data = JSON.parse(xhr.responseText);
                    // if(data)
                    console.log(data);
                    if (data.status) {
                        location.href = "./login.html";
                    } else {
                        alert(data.msg);
                    }
                }
            }



        } else {
            alert("请输出正确的信息");
        }
    }

    function isDisabled() {
        if (userFlag && pwdFlag && repwdFlag && phoneFlag && emailFlag) {
            regBtn.disabled = false;
        } else {
            regBtn.disabled = true;
        }
    }















</script>

</html>